<template>
    <div class="input-password">
        <div class="password-title-wrap displayFlex justifyCtBwt">
            <span class="iconfont icon-arrows_right" @click="$emit('closeInputPassword')"></span>
            <span class="input-title">请输入支付密码</span>
            <span></span>
        </div>
        <div class="displayFlex flexCenter positionR">
            <label for="password">
                <ul class="input-dot-list displayFlex positionR">
                    <li class="password-input-box">
                        <input name="password" maxlength="6" @focus="passWordFocus" ref="password" @blur="passwordBlur" id="password" class="password-input" type="number" v-model="password"/>
                    </li>
                    <li class="input-dot-wrap" v-for="(value,key) in 6">
                        <span class="input-dot" v-if="password && password.toString().length > key"></span>
                        <span class="light-line" v-if="password.toString().length == key && isOnfocus"></span>
                    </li>
                    <li class="forget-text" @click="forgetPass">忘记密码?</li>
                    <li class="password-wrong" v-if="passwordWrong">密码错误</li>
                </ul>
            </label>
        </div>
    </div>
</template>

<script>
    export default {
        name: "inputPassWord",
        data(){
            return{
                password:'',
                isOnfocus:false,
                passwordWrong:false,
            }
        },
        mounted(){
            let that = this;
            this.$refs.password.onfocus = function(){
                that.isOnfocus = true;
            };
            this.$refs.password.onblur = function(){
                that.isOnfocus = false;
            };
            this.$refs.password.focus();
        },
        methods: {
            forgetPass() {
                this.openHKHWConfirm('找回密码需要下载好看好玩，是否下载');
            },
            passwordBlur(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                this.iosBlur('auto',scrollTop)
            },
            passWordFocus(){
                $("#password").on('focus', function () {
                    let i = 0;
                    let height = document.body.scrollHeight;
                    let timer = setInterval(function () {
                        if (i <= 10) {
                            document.body.scrollTop = height;
                            i++
                        } else {
                            clearInterval(timer);
                        }
                    }, 10)
                })
            }
        },
        watch:{
            password(val){
                this.passwordWrong = false;
                if(val && val.toString().length > 6){
                    this.password = val.slice(0,6);
                }
                if(this.password && this.password.toString().length == 6){
                    setTimeout(()=>{
                        this.$emit('submitPassword','ACCOUNT',this.password)
                    },300)
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .input-password {
        background-color: #fff;
    }

    .password-title-wrap {
        padding: 0 .05rem;
        height: .4rem;
        line-height: .4rem;
        border-bottom: 1px solid #F0F0F0;

        .icon-arrows_right {
            font-size: .26rem;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
    }

    .input-title {
        text-align: center;
        color: #333333;
        font-size: .15rem;
    }

    .input-dot {
        display: inline-block;
        background-color: #333333;
        width: .1rem;
        height: .1rem;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }

    .input-dot-wrap {
        display: inline-block;
        width: .58rem;
        height: .58rem;
        text-align: center;
        line-height: .58rem;
        border-right: solid #CCCCCC 1px;
        position: relative;
        z-index: 2;
    }

    .input-dot-list {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: .3rem;
    }

    .password-input-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        input{
            width: 100%;
            height: 100%;
            opacity: 0;
            position: relative;
            z-index: -1;
        }
    }

    .forget-text {
        position: absolute;
        right: 0;
        bottom: -.28rem;
        font-size: .14rem;
        color: #3E69A5;
    }
    .light-line{
        display: inline-block;
        height: .2rem;
        width: 1px;
        position: relative;
        top: 5px;
        background-color: #333;
        -webkit-animation: 1s infinite lightLine ;
        -o-animation: 1s infinite lightLine ;
        animation: 1s infinite lightLine ;
    }
    @keyframes lightLine {
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    .password-wrong{
        color: #FF3333;
        font-size: .12rem;
        position: absolute;
        left: 0;
        bottom: -.28rem;
    }
</style>